<template>
  <section>
    <!--start 面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商城</el-breadcrumb-item>
        <el-breadcrumb-item>内容明细</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--end 面包屑-->
    <!--start content-->
    <div class="wrap addGoodsWrap">
      <el-form :model="portalData" :rules="rule" ref="ruleForm" label-width="100px" class="scroll formFontSizeMini">
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="title">内容编辑</div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12" >
            <el-form-item label="标题" prop="docListTitile">
              <el-input v-model="portalData.docListTitile" placeholder="请输入标题"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="图片">
              <el-upload
                class="over-hidden"
                :action="portalData.uploadUrl"
                list-type="picture-card"
                :file-list="portalData.docListPic.fileList"
                :data="portalData.docListPic.uploadData"
                :before-upload="picBeforeAvatarUpload"
                :on-preview="picPreview"
                :on-remove="picRemove"
                :on-success="picSuccess">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog v-model="portalData.docListPic.dialogVisible" size="tiny">
                <img width="100%" :src="portalData.docListPic.dialogImageUrl" alt>
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24"  ref="brandSelect">
            <div class="title">
              内容描述
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <script id="portalEditor1" type="text/plain" style="width:99%;height:400px;"></script>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="queren" :class="{btnBox1:!$store.state.headFold}">
      <el-button type="primary" @click="saveFn" :disabled="clickBtn">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
    <!--end content-->
  </section>
</template>


<script>
  const UE = require('UE');// eslint-disable-line
  export default {
    data(){
      return {
        clickBtn:false,    //点击（保存按钮）禁用按钮
        portalData:{      //页面的数据
          docListTitile:"",
          docListPic:{      //图片数据
            fileList:[],
            docListPicUrls:"",
            dialogImageUrl:"",
            dialogVisible:false,
            canUpload:true,
            fileListLength:0,
            uploadData:{
              "moduleName":"portal",
              "fileName":"",
              "fromCode":""
            }
          },
          //百度编辑器数据
          portalEdit:{
            editor1:null,
            title:"1",
            editorOption:{},
            content:"在这里输入。。",
            docListContent:"",
          },
          uploadUrl:"/v3/misc/common/uploadFile"
        },
        rule:{
          docListTitile:[{required: true, message: '标题不能为空', trigger: 'blur'}],
        },
        docPlaceCode:"",  //存储上个页面传的docPlaceCode
        docListCode:"",   //存储上个页面的docListCode
        urlData:"",    //存储（保存）或（修改）的url
        methodData:"",   //存储（保存）或（修改）的请求方法
      }
    },

    watch:{
      //监视查询页面开始请求时带的图片数据，并展示出来
      "portalData.docListPic.docListPicUrls":function(val,oldval){
        if(val){
          this.portalData.docListPic.fileList.push({url:""});
          return this.portalData.docListPic.fileList[0].url = val;
        }
      },
    },

    methods:{

      /* start 图片 */
      picBeforeAvatarUpload(file) {
        this.portalData.docListPic.uploadData.fileName = file.name;
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG&&!isPNG) {
          this.Public.openError(this,"上传图片只能是 JPG和PNG 格式!")
        }
        if (!isLt2M) {
          this.Public.openError(this,"上传图片大小不能超过 2MB!")
        }
        return (isPNG || isJPG) && isLt2M;
      },

      picRemove(file, fileList) {
        this.portalData.docListPic.docListPicUrls = "";
      },

      picPreview(file) {
        this.portalData.docListPic.dialogImageUrl = file.url;
        this.portalData.docListPic.dialogVisible = true;
      },

      picSuccess(response, file, fileList){
        this.portalData.docListPic.docListPicUrls = response;
      },

     //图片上传  end

     //点击（保存）或（修改）按钮
      saveFn(){
          if(!this.portalData.portalEdit.docListContent){
            this.Public.openError(this,"内容描述不能为空");
            return false
          }
          this.$refs.ruleForm.validate((valid)=>{
            if(valid){
              this.clickBtn=!this.clickBtn;
              if(this.docListCode){
                  this.urlData = "v3/portal/docLists/" + this.docListCode;
                  this.methodData = "PUT";
              }else{
                this.urlData = "/v3/portal/docLists";
                this.methodData = "post";
              }
              this.axios({
                method:this.methodData,
                url:this.urlData,
                data:{
                  "docPlaceCode":this.docPlaceCode,
                  "docListTitile":this.portalData.docListTitile,
                  "docListContent":this.portalData.portalEdit.docListContent,
                  "docListPicurl":this.portalData.docListPic.docListPicUrls,
                }
              }).then((res)=>{
                this.clickBtn=!this.clickBtn;
                this.$router.push({path:"/portalContentManage"});
                this.Public.openSuccess(this,"操作成功！");
              }).catch((err)=>{
                this.clickBtn=!this.clickBtn;
                this.Public.openError(this,err.response.data)
              });
            }else{
              this.Public.openError(this,"请完善页面信息")
              return false;
            }
          })
      },

     //初始化页面
      queryInfo(){
        this.axios({
          method:"GET",
          url:"/v3/portal/docLists/" + this.docListCode,
          data:{}
        }).then((res) => {
            this.portalData.docListTitile = res.data.docListTitile;
            this.portalData.docListPic.docListPicUrls = res.data.docListPicurl;
            UE.getEditor('portalEditor1').ready(function() {
              UE.getEditor('portalEditor1').setContent(res.data.docListContent); //赋值给UEditor
            });
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

     //点击（取消）按钮
      cancel(){
        this.$router.go(-1);
        localStorage.removeItem("docListCode");
        localStorage.removeItem("vue_docPlaceCode");
      },

    },
    created(){
        this.docListCode = localStorage.getItem("docListCode");
        this.docPlaceCode = localStorage.getItem("vue_docPlaceCode");
        if(this.docListCode){
          this.queryInfo();
        }
    },
    mounted(){
      let _this = this;
      this.portalData.portalEdit.editor1 = UE.getEditor('portalEditor1');
      this.portalData.portalEdit.editor1.addListener("contentChange",function(){
        _this.portalData.portalEdit.docListContent = this.getContent();
      });
      document.querySelector(".addGoodsWrap form").style.height = (document.documentElement.clientHeight - 200) + 'px';
    },
    destroyed() {
      this.portalData.portalEdit.editor1.destroy();
    },

  }
</script>

<style scoped>

  .over-hidden{
    width: 148px;
    height: 148px;
    overflow: hidden;
  }

  .queren{
    position: fixed;
    bottom: 0px;
    width: 87%;
    background: #fff;
    height: 80px;
    z-index:999;
  }

  .queren a{
    display: inline-block;
    height: 32px;
    line-height: 32px;
    background: #fff!important;
    border: 1px solid #cdd9e6 ;
    color: #666!important;
    width: 80px;
    border-radius:20px;
    text-align: center;
    margin-top: 20px;
    margin-right: 20px;
    box-sizing: border-box;
  }
  .queren .baocun{
    color: #fff!important;
    background: #13C19F!important;
    z-index: 100;
    cursor: pointer;
    border: 0;
    margin-left: 30px;
  }

  *{
    box-sizing: border-box;
    transition: .2s;
  }
  section {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  div.location {
    flex: 0 0 10px;
    padding: 3px 0 15px 0;
  }

  div.wrap {
    position: relative;
    flex: 1;
    width: 100%;
    padding: 15px 20px 0 20px;
    box-sizing: border-box;
    background: #fff;
  }
  div.wrap>form {
    overflow-y: auto;
  }
  .scroll {
    overflow-y: auto;
    overflow-x:hidden;
    padding-right: 20px;
  }
  .title {
    height: 50px;
    color: #03B8CC;
    font-size: 16px;
  }
  .selectWidth {
    width: 100%;
  }
  /* start 基础信息 */
  /* start 商品分类下拉的样式 */
  .departmentSelectDiv {
    position: relative;
    width: 100%;
    height: 36px;
    line-height: 36px;
  }
  .departmentSelectDiv>span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 36px;
    border:1px solid rgb(191, 212, 217);
    border-radius: 4px;
    font-size: 12px;
    padding-left: 10px;
    cursor: pointer;
  }
  .departmentSelectDiv>span:hover{
    border-color: rgb(131, 156, 165);
  }
  .departmentSelectDiv>span:active{
    border-color: #03b8cc;
  }
  .departmentSelectDiv>span:visited{
    border-color: #03b8cc;
  }
  .departmentSelectDiv>span:focus{
    border-color: #03b8cc;
  }
  .departmentSelectDiv>i{
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    height: 36px;
    line-height: 38px;
    text-align: center;
    color: rgb(191, 212, 217);
    transition: .3s;
    font-size: 12px;
  }
  .departmentSelectDiv>i.up{
    transform: rotate(180deg);
  }
  .goodsCate{
    position: absolute;
    width: 100%;
    height: 236px;
    top: 42px;
    left: 0;
    border-radius: 2px;
    box-shadow:0 2px 4px rgba(0,0,0,.12), 0 0 6px rgba(0,0,0,.04);
    border: 1px solid rgb(209, 225, 229);
    z-index: 2;
    font-size: 12px;
    background:#fff;
  }
  .goodsCateBtn{
    cursor:pointer;
    padding-left:12px;
    line-height:32px;
    border-top:1px solid #e9e9e9;
  }
  .goodsCateBtn>span{
    font-size:12px;
  }
  .departmentTree {
    width: 100%;
    z-index: 2;
    font-size: 12px;
    overflow-y: auto;
    height: 200px;
    border:0;
  }
  .selectSlide-enter-active, .selectSlide-leave-active {
    transition: .4s;
  }

  .selectSlide-enter, .selectSlide-leave-active {
    height: 0;
    opacity: 0;
  }
  .redBorder {
    border-color: #ff4949 !important;
  }
  /* end 商品分类下拉的样式 */
  /* start 商品分类的下拉新增 */
  .goodsCateAdd {
    position: absolute;
    width: 100%;
    top: 42px;
    left: 0;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border: 1px solid rgb(209, 225, 229);
    z-index: 2;
    font-size: 12px;
    background: #fff;
  }

  .departmentTreeAdd {
    width: 100%;
    z-index: 2;
    font-size: 12px;
    overflow-y: auto;
    height: 200px;
    border: 0;
  }
  /* end 商品分类的下拉新增 */
  /* start 排序 */
  .orderByDiv .btnSpan {
    display: block;
    position: absolute;
    height: 18px;
    width: 18px;
    line-height: 18px;
    text-align: center;
    margin: 0;
    padding: 0;
    right: 0;
    cursor: pointer;
    z-index: 1800;
    border:1px solid rgb(191, 212, 217);
    border-right: 0;
    -moz-user-select: none; /* 禁止文本被选中 */
  }
  .orderByDiv .btnSpan:hover {
    color: #13C19F;
  }
  .orderByDiv .btnSpan.orderByBtnAdd {
    top: 0;
    border-top: 0;
  }
  .orderByDiv .btnSpan.orderByBtnSub {
    top: 18px;
    border-bottom: 0;
  }
  /* start 排序 */
  /* end 基础信息 */
  /* start 商品规格 */
  .tableWrap {
  }
  .tableHeader{
    background-color: #eff1f8;
    padding: 0 10px;
    line-height: 50px;
  }
  .setStandardTable{
    width: 100%;
    background: #fff;
    border:1px solid #e7e9f1;
    margin-bottom: 20px;
  }
  .setStandardTable tr:nth-of-type(1) th{
    padding: 20px 0 5px 5px;
    text-align: left;
    font-weight: 400;
  }
  .setStandardTable tr+tr:hover{
    background-color:#F8F9FD;
  }
  .setStandardTable tr td {
    padding: 5px;
    font-weight: 400;
    height: 50px;
    line-height: 50px;
  }
  .addBtnI:before {
    margin-right: 10px;
  }
  .batchOper {
    margin: 5px 0;
  }
  .batchOper span{
    display: inline-block;
  }
  .showStandardTable {
    width: 100%;
    background: #fff;
    border: 1px solid #e7e9f1;
    margin-bottom: 22px;
  }
  .showStandardTable tr:nth-of-type(1) th{
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: 400;
    background: #eff1f8;
  }
  .showStandardTable tr+tr:hover{
    background-color:#F8F9FD;
  }
  .showStandardTable tr td {
    padding: 5px;
    font-weight: 400;
    text-align: center;
    height: 50px;
    line-height: 50px;
  }
  .addPicTd {
    position: relative;
  }
  .cursorPo {
    cursor: pointer;
  }
  .textAlignC {
    text-align: center;
  }
  .borderL {
    border-left:1px solid #e7e9f1 ;
  }
  .borderR {
    border-right:1px solid #e7e9f1 ;
  }
  .borderT {
    border-top:1px solid #e7e9f1 ;
  }
  .borderB {
    border-bottom:1px solid #e7e9f1 ;
  }
  /* end 商品规格 */
  .btnBox {
    position: absolute;
    bottom: 10px;
    left:180px;
    height: 50px;
    background: #fff;
    z-index: 100;
  }
  .btnBox1 {
    left:98px;
  }
  /* start 商品标签 */
  .goodsLabel {
    display: inline-block;
    position: relative;
    min-width: 80px;
    line-height: 32px;
    padding: 0 20px;
    margin: 0 10px 10px 0;
    text-align: center;
    cursor: pointer;
  }
  .checkboxSpan {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #cdd9e6;
  }
  .checkboxSpan.active {
    background: url('../../../assets/img/goodsLabelCheckbox.png') 100% 100% no-repeat;
    border-color: #00c29f;
  }
  .checkboxInput {
    display: none;
  }
  .checkboxText {
    font-size: 12px;
  }
  /* end 商品标签 */
  /* start 富文本编辑器 */
  .quillEditor {
    width: 90%;
    height: 400px;
    margin-bottom: 30px;
  }
  .ueditor {
    width:500px;
    height: 400px;
    margin-bottom: 30px;
  }
  /* end 富文本编辑器 */
  /* start upload */
  .avatar-uploader {
    display: inline-block;
  }
  .avatar-uploader .el-upload {
    vertical-align: middle;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    line-height: 40px !important;
    overflow: initial !important;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 12px;
    color: #8c939d;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  .avatar {
    width: 40px;
    height: 40px;
    display: block;
  }
  .addgoodTab{
    border-left: 1px solid rgb(223, 234, 236) ;
    border-top: 1px solid rgb(223, 234, 236) ;
    clear: both;
    margin-top: 15px;
  }
  .Tbuttom{
    margin-top: 25px;
  }
  .shichangjia{
    width: 800px;
    overflow: hidden;
  }
  .shichangjia span{
    float: left;
    line-height: 32px;
    margin-right: 10px;
  }
  .shichangjia input{
    width: 300px;
    float: left;

  }
  /* start 下拉的按钮样式 */
  .kael{
    position:absolute;
    width:100%;
    bottom:0;
    left:0;
    border-top:1px solid #e9e9e9;
    background:#fff;
    padding:6px 10px;
  }
  .kael>span{
    color:#48626a;
  }
  /* end 下拉的按钮样式 */
  /*.avatar-uploader{
        cursor: pointer !important;
    }
    .avatar-uploader:hover .avatar-uploader-icon {
        border-color: #03B8CC;
    }
    .avatar-uploader-icon {
    border-radius: 6px;
        font-size: 12px;
        padding: 15px;
        border: 1px dashed #d9d9d9;
    }
    .crop-box .g-resize {
        background-color: red !important;
    }*/
  /* end upload */
</style>
